App builderWeb

Build a Todo App

Create a small task-list web app, connect saved records, and verify the complete journey.

2 min readBuild at your own paceOpen Apps

Build a task list with a title field, an Add task button, a list of saved tasks, and a way to mark a task complete. Start with a small single-user sample before introducing private user accounts.

1. Create the app

1. 1Open Apps and create a project.
2. 2Choose Task Manager under Choose a template, or use Blank App if you prefer to assemble the screen yourself.
3. 3Name the app and create it.
4. 4Review the loaded structure in Pages before changing it.

If you start blank, add a task-list screen. A template is a starting structure: review its existing actions instead of assuming it is already connected to your data.

2. Prepare the task table

Open Backend → AppStruct and choose Create Database if necessary. Create a table named tasks, then add a Text column named title and a Boolean column named completed.

Add two sample rows, including one completed task. These make it easier to check which records the interface is showing.

3. Build the screen

Add a Text Field for the task title, a Button labeled Add task, and Empty List for the task display. Use text and a suitable control inside the list to show each task and its completion state.

Keep an understandable empty state, such as “No tasks yet. Add your first task above.” Check the structure before adding decorative details.

4. Connect the actions

Select Add task and open its action controls or More actions.... Configure Add row for the tasks table, mapping the input to title and setting the initial completion value.

Configure the list's read flow with Get row and map the returned values into its item template. Add an Update row action to the completion control. Its record selector must target the selected task, rather than every row.

After adding or updating, check how the displayed list obtains its latest values. A saved record and a refreshed screen are separate results.

5. Test and publish

Use Preview to add a task, inspect its backend row, mark it complete, and reopen the list. Test an empty title and a long title. Repeat at Desktop, Tablet, and Mobile sizes.

When this small journey works, choose Publishing → Web App → Publish. Wait for a successful deployment and test the same journey at the published address.

For a multi-user version, configure app-user authentication and record permissions separately before using private tasks.